import type { IColumnsOption } from 'vc';
import { INDEX, COMPANY_NAME, INFO_SOURCE, PROVINCE, CITY, INDUSTRY_CATEGORY, BUSINESS_DATA, REGISTERED_CAPITAL } from '@/utils';

export function useTable() {
  const tableData = ref([]);

  const showDialog = ref(false);

  const dialogData = reactive({
    revocationCode: 0,
    revocationNoticeDate: '',
    revocationCatalogueName: '',
    revocationFileType: '',
    revocationFileUrl: '',
    className: '',
    showText: ''
  });
  const showRevocationDialog = (row, className, showText) => {
    if (row.revocationCode === 1) {
      dialogData.revocationCode = row.revocationCode;
      dialogData.revocationNoticeDate = row.revocationNoticeDate || '-';
      dialogData.revocationCatalogueName = row.revocationCatalogueName || '-';
      dialogData.revocationFileType = row.revocationFileType;
      dialogData.revocationFileUrl = row.revocationFileUrl;
      dialogData.className = className;
      dialogData.showText = showText;
      showDialog.value = true;
    }
  };

  const columns = ref<IColumnsOption[]>([
    { ...INDEX },
    { ...COMPANY_NAME },
    {
      title: '披露日期',
      field: 'noticeDate',
      width: 100,
      align: 'center',
      sortable: true,
      sortBy: 'noticeDate'
    },
    { ...INFO_SOURCE('catalogueName') },
    {
      title: '类型',
      field: 'professionalField',
      width: 150,
      sortable: true,
      sortBy: 'professionalField'
    },
    {
      title: '认定批次',
      field: 'batch',
      width: 100,
      align: 'center',
      sortable: true,
      sortBy: 'batch'
    },
    {
      title: '状态',
      field: 'revocationCode',
      width: 100,
      align: 'center',
      sortable: true,
      sortBy: 'revocationCode',
      slots: {
        default: ({ row }) => {
          const color = { 0: 'revocation-03b915', 1: 'revocation-ec808d' };
          const text = { 0: '有效', 1: '已撤销' };
          const className = 'revocation ' + color[row.revocationCode];
          const showText = text[row.revocationCode] || '-';
          return (
            <span title={showText} class={className} onClick={() => showRevocationDialog(row, className, showText)}>
              {showText}
            </span>
          );
        }
      }
    },
    {
      title: '发布单位',
      field: 'postAgency',
      width: 200,
      sortable: true,
      sortBy: 'postAgency'
    },
    { ...PROVINCE },
    { ...CITY },
    { ...INDUSTRY_CATEGORY },
    { ...BUSINESS_DATA },
    { ...REGISTERED_CAPITAL }
  ]);

  return {
    tableData,
    showDialog,
    dialogData,
    columns
  };
}
